<template>
	<div class="app-container">
		<div class="bgWhite radius8 p20">
			<div class="flex col-center row-between mb20">
				<span class="fb fs16">订单系数规则列表</span>
			</div>
			<el-table v-loading="loading" :data="list" style="width: 100%" :header-row-style="{
					background: '#FAFAFA',
					color: '#0C1019',
					height: '54px',
				  }" :cell-style="{ height: '54px' }">
				  <el-table-column label="ID" align="center" prop="id" width="120"/>
				  <el-table-column label="部门ID" align="center" prop="deptId" width="120"/>
				<el-table-column label="部门名称" align="center" prop="deptName">
					<template #default="scope">
						<span class="main-color">{{scope.row.deptName}}</span>
					</template>
				</el-table-column>
				<el-table-column label="赠品承担系数" align="center" prop="coefficientGiveaway"/>
				<el-table-column label="商品溢价分成系数" align="center" prop="commodityPremium"/>
				<el-table-column label="毛利率分界线" align="center" prop="grossProfitRate"/>
				<el-table-column fixed="right" label="操作" align="center" width="200">
					<template v-slot="scope">
						<el-button size="mini" type="text" @click="handleDetail(scope.row,0)"
						v-hasPermi="['raw_material_price:edit']"
							>编辑</el-button>
						<el-button size="mini" type="text" @click="handleDetail(scope.row,1)"
						v-hasPermi="['rawmaterial_price_history:check']"
						>详情</el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
								v-model:limit="queryParams.pageSize" @pagination="getList" />
		</div>
		<!-- 新增 -->
		<el-dialog v-model="dialogFormVisible" width="496" :title="type == 0 ? '编辑订单系数规则' : '订单系数规则详情'" center
		 :align-center="true"
			custom-class="radius8">
			<el-form :model="form" class="mt20" ref="formRef" :rules="rules" label-width="135px">
				<el-form-item label="部门名称" prop="deptName">
					<div class="fb main-color">{{form.deptName}}</div>
				</el-form-item>
				<el-form-item label="毛利率分界线" prop="grossProfitRate">
					<el-input size="large" :disabled="type == 0 ? false : true" v-model="form.grossProfitRate" placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item label="商品溢价分成系数" prop="commodityPremium">
					<el-input size="large" :disabled="type == 0 ? false : true" type="number" min="0" v-model="form.commodityPremium" placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item label="赠品承担系数" prop="coefficientGiveaway">
					<el-input size="large" :disabled="type == 0 ? false : true" type="number" min="0" v-model="form.coefficientGiveaway" placeholder="请输入"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer text-right mt30" v-if="type == 0">
				<el-button class="cancelSubBtn" @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="confirm('formRef')" class="mainSubBtn">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script setup name="orderCoefficientSetup">
	import {
		orderCoefficientRulesList,//列表
		orderCoefficientRulesDetail,//详情
		orderCoefficientRulesSave//保存
	} from "@/api/business/rules";
</script>
<script>
	export default {
		data() {
			return {
				loading: true, // 遮罩层
				total: 0, // 总条数
				list: [], // 表格数据
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					level:2
				}, //查询参数
				dialogFormVisible:false,
				form:{
					deptId:'',//部门id
					deptName:'',//部门名称
					grossProfitRate:'',//毛利率分界线
					commodityPremium:'',//商品溢价分成系数
					coefficientGiveaway:'',//赠品承担系数
				},
				rules:{
					grossProfitRate: [
						{required: true,message: '请输入毛利率分界线',trigger: 'blur'},
					],
					commodityPremium: [
						{required: true,message: '请输入商品溢价分成系数',trigger: 'blur'},
					],
					coefficientGiveaway: [
						{required: true,message: '请输入赠品承担系数',trigger: 'blur'},
					]
				},
				type:0,//新增
			}
		},
		created() {
			this.getList()
		},
		methods: {	
			//查询列表
			getList() {
				this.loading = true;
				orderCoefficientRulesList(this.queryParams).then((response) => {
					this.list = response.data;
					this.total = response.total;
					this.loading = false;
				});
			},
			//更新价格
			confirm(formName){
				//新增
				this.$refs[formName].validate((valid) => {
					if (valid) {
						delete this.form.id
						orderCoefficientRulesSave(this.form).then(res=>{
							this.$modal.msgSuccess("添加成功");
							this.dialogFormVisible = false
							this.getList()
						})
					}
				})	
			},
			// 详情
			handleDetail(row,num) {
				let resData = row
				this.form = {
					deptId:resData.deptId,//部门id
					deptName:resData.deptName,//部门名称
					grossProfitRate:resData.grossProfitRate,//毛利率分界线
					commodityPremium:resData.commodityPremium,//毛利率分界线
					coefficientGiveaway:resData.coefficientGiveaway,//赠品承担系数
				}
				this.dialogFormVisible = true
				this.type = num 
				// orderCoefficientRulesDetail(row.deptId).then(res=>{
				// 	let resData = res.data
				// 	this.form = {
				// 		deptId:resData.deptId,//部门id
				// 		deptName:resData.deptName,//部门名称
				// 		grossProfitRate:resData.grossProfitRate,//毛利率分界线
				// 		commodityPremium:resData.commodityPremium,//毛利率分界线
				// 		coefficientGiveaway:resData.coefficientGiveaway,//赠品承担系数
				// 	}
				// 	this.dialogFormVisible = true
				// 	this.type = num 
				// })
			}
		}
	}
</script>